<template>
  <div>
    <!-- 使用 v-if 来控制 el-dialog 的显示和销毁 -->
    <el-dialog
      title="设备详情"
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      width="65%"
      top="10vh"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 宏视 -->
        <el-tab-pane
          label="监控"
          name="macrovision"
          v-if="
            deviceInfo.deviceType == 'Camera' && deviceInfo.classMark == 'V380'
          "
        >
          <liveMacrovision
            ref="refliveMacrovision"
            :deviceInfo="deviceInfo"
          ></liveMacrovision>
        </el-tab-pane>
        <!-- 萤石云 -->
        <el-tab-pane
          label="监控"
          name="first2"
          v-else-if="
            deviceInfo.deviceType == 'Camera' && deviceInfo.protocol == '4'
          "
        >
          <!-- <liveStreaming2 ref="refliveStreaming2" :deviceInfo="deviceInfo"></liveStreaming2> -->
          <EZUIKitJs ref="refEZUIKitJs" :deviceInfo="deviceInfo"></EZUIKitJs>
        </el-tab-pane>
        <!-- 视洞 -->
        <el-tab-pane
          label="直播"
          name="first"
          v-else-if="
            deviceInfo.deviceType == 'Camera' &&
            deviceInfo.manufacturerId != '1660554046491635714'
          "
        >
          <liveStreaming
            ref="refliveStreaming"
            :deviceInfo="deviceInfo"
          ></liveStreaming>
        </el-tab-pane>
        <!-- v-if="deviceInfo.deviceType === 'DoorMagnetism' || deviceInfo.deviceType === 'Infrared' || deviceInfo.deviceType === 'GasSensor' || deviceInfo.deviceType === 'SmokeAlarm' || deviceInfo.deviceType === 'FireHydrant'|| deviceInfo.deviceType === 'WaterSensor'" -->
        <!-- v-if="deviceInfo.deviceType != 'Camera'" -->
        <el-tab-pane label="设备详情" name="Device">
          <Devicedetails
            ref="refDevicedetails"
            :deviceInfo="deviceInfo"
          ></Devicedetails>
        </el-tab-pane>

        <el-tab-pane
          label="事件回放"
          name="playback"
          v-if="
            deviceInfo.deviceType == 'Camera' &&
            deviceInfo.classMark == 'V380' &&
            playList.length > 0
          "
        >
          <playback ref="refplayback" :deviceInfo="deviceInfo"></playback>
        </el-tab-pane>

        <el-tab-pane
          :label="
            deviceInfo.deviceType == 'DoorMagnetism' ? '开关日志' : '监测日志'
          "
          name="second"
          v-if="
            deviceInfo.deviceType == 'DoorMagnetism' ||
            deviceInfo.deviceType == 'Infrared'
          "
        >
          <!-- <editDeviceEnd ref="refeditDeviceEnd" :deviceInfo="deviceInfo"></editDeviceEnd> -->
          <Devicelog ref="refDevicelog" :deviceInfo="deviceInfo"></Devicelog>
        </el-tab-pane>

        <el-tab-pane label="告警信息" name="alarm">
          <alarm ref="refalarm" :deviceInfo="deviceInfo"></alarm>
        </el-tab-pane>

        <el-tab-pane label="业主" name="owner">
          <ownerList ref="refownerList" :deviceInfo="deviceInfo"></ownerList>
        </el-tab-pane>

        <!-- <el-tab-pane label="物模型日志" name="model">
          <modelList ref="refmodelList" :deviceInfo="deviceInfo"></modelList>
        </el-tab-pane> -->
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { mapState } from "vuex";
import liveStreaming from "@components/DeviceInfo/liveStreaming.vue"; //摄像头
// import liveStreaming2 from '@components/DeviceInfo/liveStreaming2.vue'//萤石云摄像头 旧
import EZUIKitJs from "@components/DeviceInfo/EZUIKitJs.vue"; //萤石云摄像头新
import liveMacrovision from "@components/DeviceInfo/liveMacrovision.vue"; //宏视摄像头
import playback from "@components/DeviceInfo/playback.vue"; //宏视摄像头回放
import Devicelog from "@components/DeviceInfo/Devicelog.vue"; //开关  监测日志
import Devicedetails from "./components/Devicedetails.vue";
import ownerList from "./components/ownerList.vue"; //业主
import modelList from "./components/modelList.vue";
import { reqPlayList } from "@api/api.js";
import alarm from "./components/alarm.vue";

export default {
  props: {
    deviceInfo: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    Pagination,
    liveStreaming,
    // liveStreaming2,
    EZUIKitJs,
    Devicelog,
    Devicedetails,
    liveMacrovision,
    playback,
    ownerList,
    modelList,
    alarm,
  },
  mixins: [tableStyleMixin],
  data() {
    return {
      activeName: "Device",
      dialogVisible: false,
      playList: [],
    };
  },
  computed: { ...mapState(["user"]) },
  watch: {
    dialogVisible(e) {
      // console.log(e);
      // 摄像头
      if (e && this.deviceInfo.deviceType == "Camera") {
        this.$nextTick(async () => {
          if (this.deviceInfo.classMark == "V380") {
            // 宏视
            this.activeName = "macrovision";
            await this.$refs.refliveMacrovision.init();
            this.getPlayList(); //宏视事件回放
          } else if (this.deviceInfo.protocol == "4") {
            // 萤石云
            this.activeName = "first2";
            await this.$refs.refEZUIKitJs.gettoken();
            await this.$refs.refliveStreaming.init();
          } else {
            // 视洞
            this.activeName = "first";
            await this.$refs.refliveStreaming.Cameraget(); //获取摄像头账号密码
            await this.$refs.refliveStreaming.Cameralogin(); //摄像头账号登录
            await this.$refs.refliveStreaming.reqCamerainfo(); //获取摄像头设备详情
            await this.$refs.refliveStreaming.initWebPlayer();
            await this.$refs.refliveStreaming.init();
          }
        });
      } else if (
        e &&
        (this.deviceInfo.classMark === "SDF300" ||
          this.deviceInfo.classMark === "SDF400")
      ) {
        // 获取电气综合测控装置详情
        this.activeName = "Device";
        this.$nextTick(async () => {
          this.$refs.refDevicedetails.getDeviceFindInfo();
        });
      } else if (e) {
        this.activeName = "Device";
        this.$nextTick(async () => {
          this.$refs.refDevicedetails.DeviceDataget(); //imei查询最新设备数据
          this.$refs.refDevicedetails.Devicestatistic(); // 设备数据统计
        });
      }
    },
  },
  methods: {
    //宏视事件回放
    async getPlayList() {
      const res = await reqPlayList(1, 10, this.deviceInfo.imei);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.playList = res.data.rows || [];
    },
    handleClick(tab, event) {
      // console.log(tab.paneName);
      if (tab.paneName == "first") {
      } else if (tab.paneName == "first2") {
      } else if (tab.paneName == "second") {
        this.$refs.refDevicelog.Info(); //开关日志||监测日志
      } else if (tab.paneName == "playback") {
        this.$refs.refplayback.getPlayList(); //宏视事件回放
      } else if (tab.paneName == "owner") {
        this.$refs.refownerList.getDeviceUsergetByImei(); //业主列表
      } else if (tab.paneName == "Device") {
        this.$refs.refDevicedetails.gettoken(); // 获取单个设备信息
      } else if (tab.paneName == "model") {
        this.$refs.refmodelList.getThingModelLog();
      } else if (tab.paneName == "alarm") {
        this.$refs.refalarm.AlarmList();
      }
    },
    // 点击关闭弹框
    closeDialog() {
      if (this.deviceInfo.deviceType == "Camera") {
        if (this.deviceInfo.classMark == "V380") {
          this.$refs.refliveMacrovision.destroy();
          return;
        }
        if (this.deviceInfo.manufacturerName == "视洞") {
          this.$refs.refliveStreaming.destroy();
        } else {
          this.$refs.refEZUIKitJs.destroy(); //销毁播放器
        }
      } else {
        this.$refs.refDevicedetails.closeDialog();
      }
      this.dialogVisible = false;
    },
  },
  created() {},
  deactivated() {
    this.dialogVisible = false;
    this.closeDialog();
  },
};
</script>

<style lang="less" scoped>
@import url("~@views/style/tablePage.less");

// ::v-deep .el-dialog {
//   min-height: 100vh;
//   min-width: 100vw;
// }

::v-deep .el-dialog__header {
  text-align: center;
}

// 导航栏颜色
::v-deep .el-tabs__item {
  color: @primaryThemeTxtColor2;
}

::v-deep .el-tabs__active-bar {
  background-color: #7367f0;
}

::v-deep .el-tabs__item.is-active {
  color: #7367f0;
}

::v-deep .el-dialog__body {
  padding: 0px 20px;
}

// 导航栏线条颜色
::v-deep .el-tabs__nav-wrap::after {
  background: @primaryBgcolor5;
}

::v-deep .el-tabs__nav {
  padding: 5px 20px;
}

::v-deep .el-tabs__active-bar {
  padding: 0px 20px;
  // width: 100% !important;
}
// ::v-deep .el-tabs__content{
//   min-height: 560px;
// }
</style>
